@import 'mixin';
@import 'iconfont';
@import 'color';

body{@include font_family;padding:0;margin:0;overflow-x:hidden;
	&.no_scroll{overflow:hidden;}
}
.container{width:100%;height:100vh;position:relative;
	&.login{margin:0 auto;
		.header{height:27px;padding:0 20px;
			.logo{float:left;height:27px;width:158px;margin:20px 0 20px 20px;}
			.right_nav{float:right;height:27px;margin-top:20px;
				ul{list-style:none;padding:0;margin:0;
					li{display:inline-block;padding:0 10px;float:left;font-size:20px;position:relative;
						.color_pick{width:100px;height:120px;border:1px solid $gray_bg;background:$gray_light;padding:10px;position:absolute;top:30px;left:-100px;display:none;
							&.show{display:block;}
						}
					}
				}
			}
		}
		.content{width:100%;height:450px;background:url(../img/login_cont.png) no-repeat center bottom;position:absolute;top:50%;margin-top:-252px;
			h1{font-size:40px;font-weight: 600;text-shadow:0 4px 3px rgba($black, .5);text-align:center;line-height:50px;height:50px;color:$black;}
			.login_form{width:330px;margin:110px auto 0;
				.input_div{height:45px;width:100%;margin-bottom:20px;border-radius:6px;background:$white;overflow:hidden;
					label{float:left;display:inline-block;height:45px;line-height:45px;text-align:center;width:50px;}
					input[type=text],input[type=password]{border:0 none;height:45px;width:calc(100% - 60px);background:$white;float:left;display:inline-block;outline:none;font-size:14px;color:$darker;}
				}
				.input_btn{
					button{height:45px;border:1px solid $white;width:100%;border-radius:6px;font-size:20px;}
				}
			}
		}
		.footer{position:absolute;bottom:50px;width:100%;
			p{text-align:center;color:$darker;font-size:14px;line-height:30px;padding:0;margin:0;}
		}
	}

	.main_header{width:100%;height:60px;position:fixed;top:0;left:0;
		.l_cont{float:left;width:340px;height:60px;
			.logo{width:50px;height:25px;float:left;margin:15px 10px 0 60px;}
			h1{font-size:20px;float:left;display:inline-block;white-space:nowrap;font-weight:600;line-height:35px;}
		}
		.m_cont{width:calc(100% - 760px);float:left;line-height:60px;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
		.r_cont{width:370px;display:table;height:60px;
			.cont{display:table-cell;
				&:first-child{vertical-align:middle;
					p{font-size:14px;padding:0;margin:0;line-height:20px;}
				}
				&:last-child{width:100px;font-size:16px;vertical-align:middle;}
			}
		}
	}
	.menu{width:220px;position:fixed;height:calc(100vh - 60px);left:0;top:60px;overflow-x:hidden;overflow-y:auto;transition:all .3s ease-in-out;
		&.hidden{left:-190px;transition:all .3s ease-in-out;}
		.head{height:28px;line-height:28px;text-align:center;text-indent:3em;font-size:12px;
			.slip{float:right;line-height:24px;padding:0;width:31px;border-radius:4px;font-size:16px;text-indent:0;
				i{color:$white;}
			}
		}
		.user_cont{height:80px;box-sizing:border-box;padding:15px 0 15px 30px;
			.avatar{display:inline-block;width:50px;height:50px;border-radius:100%;float:left;margin-right:10px;overflow:hidden;
				img{width:100%;}
			}
			p{padding:0;margin:0;line-height:25px;
				&.user_name{font-size:14px;}
				&.position{font-size:12px;}
			}
		}
		.nav{list-style:none;padding:0;margin:20px 34px 0 30px;
			li.nav_list{line-height:30px;margin-bottom:15px;
				a{display:inline-block;margin-left:8px;font-size:15px;text-decoration:none;line-height:30px;font-weight:600;}
				.iconfont{font-size:20px;float:left;}
				.fa.fa-caret-right,.fa.fa-caret-down{float:right;margin-top:8px;}
				ul{list-style:none;padding:0;margin:10px 0 20px 30px;width:calc(100% + 34px);display:none;
					li{line-height:20px;margin-bottom:0;min-height:20px;position:relative;
						a{text-decoration:none;font-size:14px;font-weight:400;}
					}
					&.sub_nav{
						li{border:0 none;
							span{width:10px;height:10px;display:inline-block;margin-left:-5px;border-radius:100%;}
							ul{display:none;padding:0;margin:0;
								li{line-height:15px;min-height:15px;padding:0;border:0 none;
									span{width:5px;height:5px;display:inline-block;margin-left:10px;border-radius:100%;}
									a{font-size:12px;font-weight:normal;margin-left:12px;}
								}
							}
							&.active{
								ul{display:block;}
							}
						}
					}
				}
				&.active{
					ul{display:block;}
				}
				.show{display:block;}
			}
		}
	}
	.main_cont{position:fixed;top:60px;left:221px;padding:20px 20px 80px 20px;width:calc(100% - 221px);height:calc(100vh - 60px);box-sizing:border-box;overflow-y:auto;overflow-x:hidden;transition:all .3s ease-in-out;
		&.show_all{width:calc(100% - 31px);left:31px;transition:all .3s ease-in-out;}
		.tabs{width:100%;
			ul{list-style:none;padding:10px 10px 0 10px;height:40px;margin:0;
				li{float:left;margin-right:4px;border-top-left-radius:6px;border-top-right-radius:6px;line-height:40px;padding:0 20px;}
			}
		}
		.tab_ctrl{line-height:40px;min-height:40px;margin-top:-1px;
			.search_cont{padding:10px 20px;@extend .clearfix;
				.half_cont{width:calc((100% - 20px) / 2);margin-right:20px;box-sizing:border-box;float:left;
					&:nth-child(even){margin-right:0;}
				}
			}
			.ctrl_cont{line-height:40px;min-height:40px;display:table;width:100%;
				ul{list-style:none;padding:0;margin:0;height:40px;display:table-cell;
					li{display:inline-block;padding:0 20px;line-height:20px;font-size:14px;margin-top:10px;cursor:pointer;
						&:last-child{border:0 none;}
					}
					&.middle_cont{
						li{padding:0;border:0 none;
							.btn{height:26px;line-height:20px;padding:3px 10px;}
						}
					}
					&.left_cont{text-align:left;}
					&.right_cont{text-align:right;}
				}
			}
			&.tab_btn{padding:0 20px;}
			&.no_bg{background:$white;}
		}
	}
	.r_ctrl_cont{width:240px;height:570px;position:absolute;right:-240px;top:15px;z-index:999999;transition:all .5s ease-in-out;padding:0 10px 15px 15px;box-sizing:border-box;
		.r_ctrl{width:44px;height:30px;line-height:30px;text-align:center;position:absolute;left:-44px;border-top-left-radius:15px;border-bottom-left-radius:15px;cursor:pointer;display:inline-block;
			i{font-size:14px;}
		}
		.title{font-size:16px;font-weight:600;padding:15px 0;margin:0;text-align:center;}
		.label{font-size:14px;font-weight:600;display:inline-block;
			&.block{display:block;}
		}
		.cont{padding:15px 0;font-size:14px;
			select{-webkit-appearance: none;-moz-appearance: none;appearance: none;background:$white url(../img/select.png) no-repeat right center;line-height:30px;height:30px;width:130px;padding:0 5px;}
			select::-ms-expand {display: none; /* hide the default arrow in ie10 and ie11 */}
		}
		&.show_ctrl{right:0;transition:all .5s ease-in-out;box-shadow:0 0 10px rgba($black,.3);}
	}
}

.tab_cont,.tab_c{position:relative;width:100%;padding:15px 15px 65px 15px;box-sizing:border-box;background-color:$white;border:{top:0;right:1px solid $gray_bg;bottom:1px solid $gray_bg;left:1px solid $gray_bg;};@extend .clearfix;
	.h_scroll{position:relative;overflow-x:auto;overflow-y:hidden;}
	.left_cont,.right_cont,.half_cont{border:1px solid $gray_bg;float:left;min-height:400px;background-color:$gray_light;box-sizing:border-box;padding:20px;
		.title{font-size:18px;font-weight:600;padding:0;margin:0;}
	}
	.left_cont{width:200px;overflow:auto;}
	.right_cont{margin-left:10px;width:calc(100% - 214px);}
	.half_cont,.half_cont_title{width:calc((100% - 20px) / 2);margin-right:20px;box-sizing:border-box;
		&:nth-child(even){margin-right:0;}
	}
	.half_cont_title{padding:0;line-height:30px;font-size:14px;font-weight:normal;float:left;}
	.paginate{position:absolute;bottom:0;border-top:1px solid $gray_bg;height:50px;line-height:50px;width:calc(100% - 40px);left:0;right:0;margin:auto;padding:0 20px;}
	.tree{list-style:none;padding:20px;margin:0;
		li{font-size:16px;
			ul{list-style:none;padding:10px 10px 10px 20px;
				li{font-size:14px;
					ul{list-style:none;padding:10px 10px 10px 20px;
						li{font-size:12px;}
					}
				}
			}
		}
	}
}
.tab_c{padding:15px;
	&.v_scroll{overflow-x:hidden;overflow-y:auto;height:400px;}
}

.form_cont{@extend .clearfix;
	.input_inline{width:250px;line-height:30px;float:left;margin:0 10px 10px 0;
		label{display:inline-block;white-space:nowrap;text-align:right;margin-right:5px;font-size:14px;min-width:4em;
			em{color:$red;font-style:normal;margin-right:3px;}
		}
		input[type=text]{line-height:20px;height:20px;padding:3px;display:inline-block;width:150px;border-radius:0;outline:none;}
		input:read-only{background-color:$gray_bg;}
		select{width:156px;line-height:30px;height:30px;padding-left:3px;border-radius:0;}
		textarea{resize: vertical;width:100%;min-height:10em;outline:none;padding:5px;box-sizing:border-box;}
		textarea.resume{resize:none;width:52em;height:35px;min-height:35px;line-height:35px;outline:none;padding:0 5px;box-sizing:border-box;}
		&.block{float:none;width:100%;margin:10px 0;
			label{display:block;text-align:left;}
		}
	}
	select{-webkit-appearance: none;-moz-appearance: none;appearance: none;background:$white url(../img/select.png) no-repeat right center;line-height:30px;height:30px;outline:none;}
	select::-ms-expand {display: none; /* hide the default arrow in ie10 and ie11 */}
	select[multiple]{width:100%;height:300px;border:1px solid $black;background-image:none;}
	&.block{padding:20px 0 0;
		.input_inline{float:none;margin:0 0 20px;width:100%;@extend .clearfix;
			label{min-width: 6em;display:table-cell;vertical-align:top;float:left;}
			input[type=text],select{width:250px;display:table-cell;float:left}
			textarea{width:calc(100% - 100px);resize:none;display:table-cell;min-height:5em;height:5em;float:left;}
		}
	}

	h2{font-size:14px;font-weight:600;}
	.half_cont{width:calc((100% - 20px) / 2);float:left;margin-right:20px;min-height:300px;
		&:last-child{margin-right:0;}
		.input_inline{width:100%;
			label{font-size:12px;width:7em;}
		}
	}
}

.tabs_main{
	ul.tab_list{width:100%;margin-bottom:20px;background-color:$white;padding:0 0 0 10px;border-bottom:1px solid $gray_bg;list-style:none;height:33px;
		li.tab{float:left;margin:0 5px 0 0;padding:2px 20px;font-size:14px;height:28px;line-height:28px;cursor:pointer;border:{top:1px solid $gray_bg;right:1px solid $gray_bg;bottom:0;left:1px solid $gray_bg;};border-top-left-radius:6px;border-top-right-radius:6px;
			&.active{font-size:14px;font-weight:600;border:{top:1px solid $gray_bg;right:1px solid $gray_bg;bottom:1px solid $white;left:1px solid $gray_bg;};line-height:28px;background-color:$white;}
		}
	}
	div.tab_div{min-height:20px;padding:10px;box-sizing:border-box;}
}

table{min-width:100%;border-collapse:collapse;border:1px solid $gray_bg;width:auto;margin-bottom:10px;
	caption{margin-bottom:10px;font-weight:600;text-align:left;}
	th,td{border:1px solid $gray_bg;padding:5px;line-height:20px;font-size:14px;}
	th{font-weight:600;white-space:nowrap;}
	tr{
		&:nth-child(odd){background-color:$gray_light;}
		&:nth-child(even){background-color:$white;}
	}
	&:not(:nth-child(1)){margin-top:20px;}
}

.paginate{color:darken($dark, 30%);font-size:14px;
	.red_num{color:#900;font-size:18px;font-weight:bold;}
	.l_cont{
		width:20%;float:left;
	}
	.c_cont{
		width:60%;float:left;text-align:center;
		ul{list-style:none;padding:0;margin:0 auto;display:table;width:auto;
			li{float:left;font-size:14px;height:27px;
				&.prev, &.first, &.next, &.last{border:1px solid $gray_bg;border-radius:2px;margin-right:2px;width:36px;height:27px;box-sizing:border-box;line-height:27px;text-align:center;margin-top:12px;}
				&.prev{margin-right:5px;}
				&.next{margin-left:5px;}
				.goto{width:24px;height:17px;text-align:center;margin-right:5px;border:1px solid $gray_bg;}
				select{-webkit-appearance: none;-moz-appearance: none;appearance: none;background:$white url(../img/select.png) no-repeat right center;line-height:27px;height:27px;width:36px;border:1px solid $gray_bg;border-radius:2px;}
				select::-ms-expand {display: none; /* hide the default arrow in ie10 and ie11 */}
			}
		}
	}
	.r_cont{
		width:20%;float:left;text-align:right;
	}
}
.btn{display:inline-block;line-height:30px;padding:0 10px;border-radius:4px;font-size:14px;background-color:$white;text-align:center;margin:0 7.5px;outline:none;
	&.block{display:block;margin-right:0;width:100%;}
	&.main_btn{border:0 none;color:$white;}
	&.blue{background-color:$dark_blue;border:0 none;color:$white;}
	&.green{background-color:$dark_green;border:0 none;margin-bottom:15px;color:$white;
		&:hover{background-color:$dark_green;}
	}
	&.linear_gray{background-image:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba($gray_start, 1)), to(rgba($gray_end, 1)));border:0 none;color:$black;margin-bottom:15px;
		&:hover{color:$black;}
	}
	&.linear_blue{background-image:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba($blue_start, 1)), to(rgba($blue_end, 1)));border:0 none;color:$white;}
	&.btn_lr{display:block;position:absolute;left:calc(50% - 20px);top:40%;
		&:last-child{top:calc(50% + 50px);}
	}
	&.btn_tb{display:block;position:fixed;right:40px;top:300px;
		&:last-child{top:350px;}
	}
	&.btn_prime{background-color:$gray_blue;}
	&:hover{transition: all .3s ease-in-out;}
	&:last-child{margin-right:0;}
}
.mask{background:rgba(0,0,0,.36);width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:999998;display:none;}
.popup{background-color:$white;width:720px;height:575px;display:none;border-radius:6px;position:fixed;left:50%;top:50%;margin:-290px 0 0 -360px;padding:0;z-index:9999999;overflow:hidden;
	.popup_head{height:40px;text-align:center;font-size:14px;font-weight:400;position:relative;line-height:40px;}
	.popup_close{display:inline-block;position:absolute;top:5px;right:0;width:30px;height:30px;z-index:9999999;cursor:pointer;font-size:20px;}
	.popup_content{padding:0 30px 30px;height:460px;overflow-x:hidden;overflow-y:auto;position:relative;
		.tab_cont{margin-top:10px;}
		.btn_tb{display:block;position:absolute;right:-20px;top:150px;margin:0;
			&:last-child{top:200px;}
		}
	}
	.popup_foot{height:45px;text-align:center;}
	&.show{display:block;}
}
.alert{background-color:$white;width:300px;height:165px;display:none;padding:0;position:fixed;left:50%;top:30%;margin:-82.5px 0 0 -150px;border-radius:6px;overflow:hidden;z-index:9999999;border:5px solid rgba(0,0,0,.6);
	.alert_head{height:40px;line-height:40px;text-align:center;font-size:16px;font-weight:500;position:relative;
		.fa{color:$red;}
	}
	.alert_content{height:80px;line-height:20px;width:300px;padding:20px 40px;box-sizing:border-box;text-align:center;font-size:18px;font-weight:600;}
	.alert_foot{height:45px;text-align:center;}
	&.show{display:block;}
}
.clearfix, .clear {zoom: 1;clear: both;}
.clearfix:before, .clearfix:after, .clear:before, .clear:after {content: " ";display: table;}
.clearfix:after, .clear:after {clear: both;}

.pull_right{float:right;}
.pull_left{float:left;}
.text_brown{color:$brown_dark !important;}
.text_dark{color:$black !important;}
.text_green{color:$green !important;}
.text_purple{color:$purple !important;}